<template>
	<div>
		<div class="header">
			<h2>收货信息</h2>
			<h4>添加新地址</h4>
		</div>
		<div class="top top-first">新增收货信息</div>
		<div class="top">
			配送方式：<input type="radio" checked="ture" /> 配送上门
		</div>
		<form class="form">
			<li class="form-one">
				<label for="one">收货人：</label> <input type="text" id="one" />
			</li>
			<li class="form-two">
				<label for="one">手机：</label> <input type="text" id="one" />
			</li>

			<li class="form-thire">
				<label for="one">备用手机：</label> <input type="text" id="one" />
			</li>

			<li class="form-four">
				<label>所在地区：</label> <input type="text" id="one" />
			</li>

			<li class="form-five">
				<label for="one">详细地址：</label> <input type="text" id="one" />
			</li>
			<div>
				<li></li>
				<li></li>
				<li></li>
			</div>
			<li class="form-six">
				<label for="one"></label> <input type="text" id="one" />
			</li>

			<div class="checkbox">
				<input type="checkbox" checked="ture" /><span>设为默认收货地址</span>
			</div>

			<button title="保存并使用">保存并使用</button>
		</form>

		<div class="pay-style">
			<div><span>支付方式 </span><span>苏宁支付新客满1000元减15元</span></div>
			<div class="pay">
				<li>苏宁支付</li>
				<li>支付宝支付</li>
				<li>微信支付</li>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "orderForm",
	data() {
		return {}
	},
}
</script>

<style lang="less" scoped>
.header {
	display: flex;

	height: 30px;
	margin-left: 200px;
	h2,
	h4 {
		// margin-bottom: 0px;
	}
}
.top {
	margin-left: 200px;
}
.top-first {
	background-color: #f8f8f8;
	height: 40px;
}
.form {
	margin-left: 200px;
	li {
		list-style: none;
		margin: 10px 0;
	}
	.form-two {
		margin-left: 12px;
	}
	.form-thire {
		margin-left: -12px;
	}
	.form-four {
		margin-left: -12px;
	}
	.form-five {
		margin-left: -12px;
	}
	.form-six {
		margin-left: 50px;
	}
	button {
		height: 30px;
		width: 100px;
		color: #f8f8f8;
		font-size: 12px;
		background-color: #f60;
	}
	.checkbox,
	button {
		margin-left: 50px;
	}
}

.pay-style {
	margin-top: 100px;
}
.pay {
	height: 50px;
	display: flex;
	justify-content: flex-start;
	margin-left: 150px;

	li {
		width: 220px;
		height: 38px;
		border: 1px solid #f3f3f3;
		margin-left: 20px;
		list-style: none;
		font-size: 15px;
		line-height: 35px;
		text-align: center;
	}
}
</style>
